import { Table, Button, message } from 'antd';
import React, { useState, useEffect } from 'react'
import { getStoreApi } from "../../apis/Store"
import { storeStatusFilter, storeTypeFilter } from "../../utils/FiltersUtils"
import StoreModel from '../../components/StoreModel';

export default function Shop() {
    //表头数据
    const columns = [
        {
            title: '店铺名称',
            dataIndex: 'shopName',
        },
        {
            title: '信誉积分',
            dataIndex: 'prestige',
        },
        {
            title: '商铺状态',
            dataIndex: 'status',
            filters: [
                { text: '禁用', value: '0' },
                { text: '启用', value: '1' },
            ],
            render: tags => (
                <span>
                    {storeStatusFilter(tags)}
                </span>
            ),
        },
        {
            title: '电话',
            dataIndex: 'telephone',
        },
        {
            title: '商铺类型',
            dataIndex: 'type',
            filters: [
                { text: '充电站', value: '0' },
                { text: '商铺', value: '1' },
            ],
            render: tags => (
                <span>
                    {storeTypeFilter(tags)}
                </span>
            ),
        },
        {
            title: '门店详情',
            render: tags => {
                return (
                    <span style={{ color: "#40a9ff" }} onClick={() => showModal(tags)}>查看详情</span>
                )
            }
        },
        {
            title: '查看警告',
            dataIndex: 'id',
            render: tags => (
                <span style={{ color: "#40a9ff" }}> 查看警告 </span>
            ),
        },
        {
            title: '警告',
            render: tags => {
                return (
                    <>
                        {
                            tags.prestige > 80 ?
                                <Button onClick={()=> message.success('信誉积分未低至80，无法警告')}>警告</Button>
                                : <Button onClick={()=>message.warning('危险！信誉积分低于80分')}>警告</Button>
                        }
                    </>
                )
            },
        },
        {
            title: '下架',
            key: 'key',
            render: tags => (
                <Button>停用</Button>
            ),
        },
    ];
    const [selectedRowKeys, setSelectedRowKeys] = useState([]); //多选框数据
    const [data, setData] = useState([]); //存放门店信息
    const [isModalVisible, setIsModalVisible] = useState(false); //开启模态框
    const [storeDetail, setStoreDetail] = useState({}); //保存商铺详情

    //   数据全选控制
    const onSelectChange = selectedRowKeys => {
        setSelectedRowKeys([...selectedRowKeys])
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,  //带选框的数据渲染
    };
    //下拉选择框
    const handleTableChange = (pagination, filters, sorter) => {
        console.log(filters);
        //数据筛选
        getStore(filters)
    };
    //模态框
    const showModal = (tags) => {
        setStoreDetail(tags)
        setIsModalVisible(true);
    };

    useEffect(() => {
        getStore()
    }, [])

    //获取门店信息
    const getStore = async (filters) => {
        let res = await getStoreApi();
        res = res.data.rows

        if (filters) {
            if (filters.status && filters.status.length == 1) {
                res = res.filter(item => item.status == filters.status[0])
            }
            if (filters.type && filters.type.length == 1) {
                res = res.filter(item => item.type == filters.type[0])
            }
        }

        setData(res)
    }

    return (
        <div>
            <Table
                rowKey="id" //添加key
                rowSelection={rowSelection}
                columns={columns}
                dataSource={data}
                onChange={handleTableChange}
            />
            <StoreModel isModalVisible={isModalVisible} setIsModalVisible={setIsModalVisible} storeDetail={storeDetail}></StoreModel>
        </div>
    )
}

